<%--
  Created by IntelliJ IDEA.
  User: Gao
  Date: 2022/8/1
  Time: 9:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%@ include file="header.jsp"%>
</head>
<body>
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

   <script type="text/html" id="ststusTpl">
      {{#    if(d.status==1) {            }}
                正常
      {{#    } else if(d.status==2) {     }}
                禁用
      {{#    }                            }}
   </script>

    <script>
        layui.use('table', function(){
            var table = layui.table;

            //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
            //详见：https://www.layui.com/doc/modules/table.html#totalRow
            table.render({
                elem: '#test'
                ,url:'/user/selectByPage'
                ,toolbar: '#toolbarDemo'
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID',  fixed: 'left'}
                    ,{field:'name', title:'用户名'}
                    ,{field:'password', title:'密码'}
                    ,{field:'nickName', title:'昵称'}
                    ,{field:'email', title:'邮箱'}
                    ,{field:'phone', title:'电话'}
                    ,{field:'status', title:'状态',templet:'#ststusTpl'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
                ,page: true
                ,id: 'tableId'
            });

            //监听右侧（编辑、删除）工具条
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('您确认要删除么?', function() {
                        $.post(
                           '/user/deleteById',
                            {'id': data.id},
                            function(jsonResult) {
                                if (jsonResult.ok) {
                                    mylayer.okMsg('删除成功');
                                    //删除之后刷新表格
                                    table.reload('tableId');
                                } else {
                                    mylayer.errorMsg('删除失败');
                                }
                            }
                        );
                    });
                } else if(obj.event === 'edit'){
                    layer.alert('编辑行：<br>'+ JSON.stringify(data))
                }
            });

            //工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'add':
                        layer.open({
                            type: 2,
                            area: ['800px', '400px'],
                            content: '/user/getUserAddPage'
                        });
                        break;
                    case 'deleteAll':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                };
            });
        });
    </script>
</body>
</html>
